<template>
  <div id="main" style="height:500px;width: 100%;" ref="main"></div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {

    };
  },
  props: {
    finalScore: {
        type: Array,
        default: 0,
    },
    QMin: {
      type: String,
      default: 0,
    }
  },
  mounted() {
    this.test()
  },
  methods: {
    test() {
      // 官方示例 var myChart = echarts.init(document.getElementById('main'));  
      const myChart = echarts.init(this.$refs.main); 
      let obj = {}
      let key = Object.keys(this.finalScore[0])
      for (let i = 0; i < this.finalScore.length; i++) {
        for(let j = 0; j < key.length; j++){
          Array.isArray(obj[key[j]]) ? obj[key[j]].push(this.finalScore[i][key[j]]) : obj[key[j]] = [this.finalScore[i][key[j]]]
        }
      } 
      let arr = []
      let x_axis = []
      let objKey = Object.keys(obj)
      for(let i = 0; i< obj[objKey[0]].length; i++){
        x_axis.push(Number(this.QMin) + i)
      }
      for(let j = 0; j < objKey.length; j++){
        arr.push({
          data: obj[objKey[j]],
          type: 'line',
          name: objKey[j],
          smooth: true,
          animationDuration: 3000,
          markLine: {
            data: [{ type: 'average', name: '平均值' }]
          }
        })
      }
      
      //配置项，可以去查一下官方文档
      let options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {},
        xAxis: {
          name: 'Q值',
          data: x_axis, 
          boundaryGap: true
        },
        yAxis: {
          name: 'score',
          type: 'value',
          min: 'dataMin',//默认取最大值显示
          max: 'dataMax',//默认取最小值显示  
          axisLine: { show: true, } 
        },
        series: arr,
      }
      myChart.setOption(options)
    }
  }
}
</script>
 
<style>
</style>